@import './_variable.scss';
page {
  height: 100%;
  background: #F4F4F4;
}
.header {
  position: relative;
  font-size:14px;
  height:224px;
  z-index: 88;
  &.no-login {
    filter:blur(2px);
  }
  .background-img {
    width:100%;
    height:180px;
    position: relative;
    box-sizing:border-box;
    z-index:1;
    overflow-y:hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .main-container {
    background:white;
    padding:0 8px;
    margin: -145px 12px 12px 12px;
    border-radius:4px;
    position:relative;
    z-index:99;
    box-shadow: 0 0 10px #ccc;
  }
  .user-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:12px 0;
    border-bottom:1px dashed #f1f1f1;
    .user {
      display: flex;
      align-items:center;
      image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .user-info {
      margin-left:12px;
    }
  }
  .header-bottom {
    display: flex;
    align-items: center;
    justify-items: center;
    padding:18px 0;
    > view {
      flex: 1;
      text-align:center;
      image {
        width: 25px;
        height: 25px;
      }
    }
  }
  .bonus {
    color: $secondaryText;
  }
}

.login-message {
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  z-index: 120;
  display: flex;
  align-items:center;
  justify-content: center;
  width:100%;
  .get-user-btn {
    background:#2196F3;
    color: white;
    font-size: 14px;
  }
  .continue {
    color: #999;
  }
}

.jz_grid {
  margin-bottom: 16px;
  background:white;
}

.recommend-container {
  text-align: center;
  margin: 12px;
}

.recommend-button {
  font-size:14px;
  display:inline-block;
  background-color: #F4F4F4;
  color: #2196F3;
}